<template>
	<view class="subsidyDetail">
		<!-- 状态  0待处理，1市县已鉴定，2市县已驳回，3大区已鉴定，4大区已驳回，5平台已审核，6已核销 7已赔付 -->
		<view class="detail-status detail-status-two" v-if="msgData.applyStatus==0||msgData.applyStatus==1||msgData.applyStatus==3 || msgData.applyStatus==6||msgData.applyStatus==7">
			<view class="bg">
				<image src="https://www.zzzsyh.com/applets/agent/factory/31.png" mode="" v-if="msgData.applyStatus==0||msgData.applyStatus==1||msgData.applyStatus==3"></image>
				<image src="https://www.zzzsyh.com/applets/agent/factory/33.png" mode="" v-if="msgData.applyStatus==5||msgData.applyStatus==6||msgData.applyStatus==7"></image>
				<image src="https://www.zzzsyh.com/applets/agent/factory/34.png" mode="" v-if="msgData.applyStatus==2||msgData.applyStatus==4"></image>
			</view>
			<view class="text">
				<text>{{statusText}}</text>
			</view>
		</view>
		<view class="detail-status" v-else>
			<view class="bg">
				<image src="https://www.zzzsyh.com/applets/agent/factory/31.png" mode="" v-if="msgData.applyStatus==0||msgData.applyStatus==1||msgData.applyStatus==3"></image>
				<image src="https://www.zzzsyh.com/applets/agent/factory/32.png" mode="" v-if="msgData.applyStatus==5||msgData.applyStatus==6||msgData.applyStatus==7"></image>
				<image src="https://www.zzzsyh.com/applets/agent/factory/34.png" mode="" v-if="msgData.applyStatus==2||msgData.applyStatus==4"></image>
			</view>
			<view class="text">
				<text>{{statusText}}</text>
			</view>
			<view class="mark">
				<image src="https://www.zzzsyh.com/applets/agent/agent/bohui_bg.png" mode="" v-if="msgData.applyStatus==2||msgData.applyStatus==4"></image>
				<image src="https://www.zzzsyh.com/applets/agent/agent/pass_bg_2.png" mode="" v-if="msgData.applyStatus==5"></image>
			</view>
		</view>
		<view class="detail-product-info">
			<view class="bg">
				<image src="../../../static/manufacturers/bg_card1.png" mode="widthFix" v-if="msgData.applyStatus==0||msgData.applyStatus==1||msgData.applyStatus==3"></image>
				<image src="../../../static/manufacturers/bg_card2.png" mode="widthFix" v-if="msgData.applyStatus==5||msgData.applyStatus==6||msgData.applyStatus==7"></image>
				<image src="../../../static/manufacturers/bg_card3.png" mode="widthFix" v-if="msgData.applyStatus==2||msgData.applyStatus==4"></image>
			</view>
			<view class="info">
				<view class="info-title font_blod">
					<text>产品信息</text>
				</view>
				<view class="info-item-wrap">
					<view class="info-item" v-for="(item,index) in list" :key="index">
						<view class="item-label">
							<text>{{item.name}}</text>
						</view>
						<view class="item-content">
							<text>{{item.value}}</text>
						</view>
					</view>
					<view class="info-item">
						<view class="item-label">
							<text>初始安装凭证：</text>
						</view>
						<view class="item-content item-image">
							<image :src="image" mode="" v-for="(image,imageIndex) in installImages" :key="imageIndex" @click="previewImage(image,installImages)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-grant-info detail-info">
			<view class="info-title font_blod">
				<text>申请补助金信息</text>
			</view>
			<view class="info-item">
				<view class="item-label">
					<text>故障产品凭证：</text>
				</view>
				<view class="item-content item-image">
					<image :src="image" mode="" v-for="(image,imageIndex) in faultImages" :key="imageIndex" @click="previewImage(image,faultImages)"></image>
				</view>
				<view class="item-label">
					<text>故障描述：</text>
				</view>
				<view class="item-content">
					<text>{{msgData.faultDetails}}</text>
				</view>
			</view>
		</view>
		<view class="detail-bohui-info detail-info" v-if="msgData.applyStatus==1||msgData.applyStatus==2||msgData.applyStatus==3||msgData.applyStatus==4">
			<view class="info-item">
				<view class="item-label font_blod">
					<text v-if="msgData.applyStatus==1||msgData.applyStatus==3">产品鉴定结果：</text>
					<text v-if="msgData.applyStatus==2||msgData.applyStatus==4">驳回原因：</text>
				</view>
				<view class="item-content">
					<text v-if="msgData.applyStatus==1||msgData.applyStatus==2">{{msgData.auditContent}}</text>
					<text v-if="msgData.applyStatus==3||msgData.applyStatus==4">{{msgData.agentContent}}</text>
				</view>
			</view>
		</view>
		<view class="detail-tongguo-info detail-info" v-if="msgData.applyStatus==5">
			<view class="info-item">
				<view class="item-label">
					<text>市县鉴定结果：</text>
				</view>
				<view class="item-content">
					<text>通过</text>
				</view>
			</view>
		</view>
		<view class="detail-tongguo-info detail-info" v-if="msgData.applyStatus==5">
			<view class="info-item">
				<view class="item-label">
					<text>大区鉴定结果：</text>
				</view>
				<view class="item-content">
					<text>通过</text>
				</view>
			</view>
		</view>
		<!-- <view class="subsidyDetail-title">
			<text class="subsidyDetail-title-txt1"></text>
			<text class="subsidyDetail-title-txt2">配件信息</text>
		</view>
		<view class="subsidyDetail-main">
			<view class="subsidyDetail-main-li" v-for="(item, index) of list" :key="index">
				<text class="subsidyDetail-main-li-left">{{item.name}}</text>
				<text class="subsidyDetail-main-li-right">{{item.value}}</text>
			</view>
		</view>
		<view class="subsidyDetail-title">
			<text class="subsidyDetail-title-txt1"></text>
			<text class="subsidyDetail-title-txt2">申请补助金信息</text>
		</view>
		<view class="subsidyDetail-main">
			<view class="subsidyDetail-main-li">
				<text class="subsidyDetail-main-li-left">故障描述:</text>
				<text class="subsidyDetail-main-li-right">{{msgData.faultDetails}}</text>
			</view>
			<view class="subsidyDetail-main-li">
				<text class="subsidyDetail-main-li-left">故障产品凭证:</text>
				<view class="subsidyDetail-main-li-right">
					<image class="subsidyDetail-main-li-right-img" @click="previewImage(changeImg(msgData.faultImages), ind)" v-for="(ite,ind) in changeImg(msgData.faultImages)" :key="ind" :src=ite mode=""></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				id: '',
				msgData: {}
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		computed: {
			list () {
				let dat = this.msgData
				return [{
					name: '配件名称：',
					value: dat.partsName
				}, {
					name: '配件型号：',
					value: dat.attributeName
				}, {
					name: '申请损坏日期：',
					value: dat.createTime
				}, {
					name: '安装日期：',
					value: dat.installTime
				}, {
					name: '工时费补助金：',
					value: '￥'+dat.payPrice
				}, {
					name: '	补助金质保有效期:',
					value: dat.grantsPeriod + '截止'
				}]
			},
			statusText(){
				// 0待处理，1市县已鉴定，2市县已驳回，3大区已鉴定，4大区已驳回，5平台已审核，6已核销 7已赔付
				const status=Number(this.msgData.applyStatus)
				switch(status){
					case 0:
						return '待处理'
					break;
					case 1:
						return '市县已鉴定'
					break;
					case 2:
						return '市县已驳回'
					break;
					case 3:
						return '大区已鉴定'
					break;
					case 4:
						return '大区已驳回'
					break;
					case 5:
						return '平台已审核'
					break;
					case 6:
						return '已核销'
					break;
					case 7:
						return '已赔付'
					break;
				}
			},
			installImages(){
				if(!this.msgData.installImages){
					return []
				}
				return this.msgData.installImages.split('|')
			},
			faultImages(){
				if(!this.msgData.faultImages){
					return []
				}
				return this.msgData.faultImages.split('|')
			}
		},
		onShow() {
			this.getQrCodeApplyDetails(this.id)
		},
		methods: {
			// 图片预览
			previewImage(current,list){
				const urls=list&&list.length?list:[current]
				wx.previewImage({
				  current: current, // 当前显示图片的http链接
				  urls: urls // 需要预览的图片http链接列表
				})
			},
			// 获取详情
			getQrCodeApplyDetails (applyId) {
				uni.request({
					url: allapi.getQrCodeApplyDetails,
					data: {
						applyId: applyId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.msgData = dat
					},fail: (err) => {
						 console.log(err);
					}
				})
			},
			// 改变图片
			changeImg (val) {
				if (val) {
					return val.split('|')
				}else {
					return []
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.subsidyDetail{
		margin-bottom: 60rpx;
		.detail-status{
			width: 100%;
			height: 326rpx;
			position: relative;
			.bg{
				width: 100%;
				height: 326rpx;
				position: absolute;
				top:0;
				left:0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				position: absolute;
				top:84rpx;
				left: 64rpx;
				text{
					font-size: 42rpx;
					color: #fff;
				}
			}
			.mark{
				width: 156rpx;
				height: 156rpx;
				position: absolute;
				top:36rpx;
				right: 60rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&.detail-status-two {
				height: 252rpx;
				.bg {
					height: 252rpx;
				}
				.text {
					top: 48rpx;
				}
			}
		}
		.detail-product-info{
			width: 742rpx;
			// height: 820rpx;
			position: relative;
			margin-top:-126rpx;
			.bg{
				width: 100%;
				height: 140rpx;
				position: absolute;
				top:0;
				left:0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.info{
				position: relative;
				.info-title{
					width: 100%;
					height: 100rpx;
					padding-top: 20rpx;
					line-height: 80rpx;
					text-align: center;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					text{
						color: #333;
						font-size: 32rpx;
					}
				}
				.info-item-wrap{
					background-color: #fff;
					border-radius: 0 0 16rpx 16rpx;
					margin:0 20rpx;
				}
				.info-item{
					padding: 14rpx 44rpx;
					display: flex;
					justify-content: space-between;
					.item-label{
						width: 270rpx;
						white-space: nowrap;

						text{
							color: #666;
							font-size: 28rpx;
						}
					}
					.item-content{
						flex:1;
						margin-left: 16rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-end;
						text-align: right;
						text{
							font-size: 32rpx;
							color: #000;
						}
						&.item-image{
							image{
								width: 120rpx;
								height: 120rpx;
								border-radius: 8rpx;
								margin-left: 16rpx;
								margin-bottom: 16rpx;
							}
						}
					}
					
				}
			}
		}
		
		.detail-info{
			margin: 24rpx 20rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			.info-title{
				text-align: center;
				margin-bottom: 24rpx;
				text{
					color: #333;
					font-size: 32rpx;
				}
			}
			.info-item{
				margin-bottom: 16rpx;
				.item-label{
					text{
						color: #666;
						font-size: 28rpx;
					}
				}
				.item-content{
					margin-top:16rpx;
					text{
						color: #333;
						font-size: 28rpx;
					}
					&.item-image{
						display: flex;
						flex-wrap: wrap;
						image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 8rpx;
							margin-right: 16rpx;
							margin-bottom: 16rpx;
						}
					}
				}
			}
			&.detail-bohui-info{
				.info-item{
					.item-label{
						text{
							color: #F8A025;
						}
					}
				}
			}
			&.detail-tongguo-info{
				.info-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-label{
						margin: 0;
					}
					.item-content{
						margin: 0;
						text{
							color: #000;
							font-size: 32rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
	}
/* 	.subsidyDetail-title {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
		margin-top: 32rpx;
	}

	.subsidyDetail-title-txt1 {
		display: block;
		width: 10rpx;
		height: 34rpx;
		background: #5DD4D6;
		border-radius: 5rpx;
	}

	.subsidyDetail-title-txt2 {
		margin-left: 24rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.subsidyDetail-main {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx 24rpx;
	}

	.subsidyDetail-main-li {
		margin-bottom: 38rpx;
		display: flex;
	}

	.subsidyDetail-main-li-left {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		width: 216rpx;
	}

	.subsidyDetail-main-li-right {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}
	.subsidyDetail-main-li-right-img {
		width: 120rpx;
		height: 120rpx;
		background: #D8D8D8;
		border-radius: 8rpx;
		margin-right: 16rpx;
	} */
</style>
